<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      :model="searchModel"
      ref="searchForm"
      label-width="80px"
      :inline="true"
      size="small"
    >
      <el-form-item>
        <el-select
          v-model="searchModel.dictType"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in dictTypeListAll"
            :key="item.dictId"
            :label="item.dictName"
            :value="item.dictType"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          v-model="searchModel.dictLabel"
          placeholder="请输入字典标签"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchModel.status" placeholder="请选择字典状态">
          <el-option
            v-for="item in dict.type.sys_normal_disable"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search(pageNo, pageSize)"
          v-if="hasPermission('sys:dictData:select')"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="resetValue"
          >重置</el-button
        >
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="openAddWindow"
          v-if="hasPermission('sys:dictData:add')"
          >新增</el-button
        >
        <el-button type="warning" icon="el-icon-close" @click="doView()"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      :data="dictDataList"
      :height="tableHeight"
      border
      stripe
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column
        prop="dictCode"
        label="字典编码"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column prop="dictLabel" label="字典标签"></el-table-column>
      <el-table-column prop="dictValue" label="字典键值"> </el-table-column>
      <el-table-column prop="dictSort" label="字典排序"></el-table-column>
      <el-table-column prop="status" align="center" label="状态">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_normal_disable"
            :value="scope.row.status"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            v-if="hasPermission('sys:dictData:edit')"
            >编辑
          </el-button>
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            v-if="hasPermission('sys:dictData:delete')"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加和修改字典数据窗口 -->
    <system-dialog
      :title="dictDataDialog.title"
      :visible="dictDataDialog.visible"
      :width="dictDataDialog.width"
      :height="dictDataDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="dictData"
          ref="dictDataForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="字典类型" prop="dictType">
            <el-input v-model="dictData.dictType" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="数据标签" prop="dictLabel">
            <el-input v-model="dictData.dictLabel"></el-input>
          </el-form-item>
          <el-form-item label="数据键值" prop="dictValue">
            <el-input v-model="dictData.dictValue"></el-input>
          </el-form-item>
          <el-form-item label="样式属性" prop="cssClass">
            <el-input v-model="dictData.cssClass"></el-input>
          </el-form-item>
          <el-form-item label="回显样式" prop="listClass">
            <el-input v-model="dictData.listClass"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="dictData.status">
              <el-radio :label="'0'">正常</el-radio>
              <el-radio :label="'1'">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <br />
          <el-form-item label="显示排序" prop="dictSort">
            <el-input-number
              v-model="dictData.dictSort"
              controls-position="right"
              :min="1"
              :max="10"
            ></el-input-number>
          </el-form-item>
          <br />
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="dictData.remark"
              :rows="1"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
//导入dict.js脚本
import dictApi from "@/api/dict";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
export default {
  name: "dictDataList",
  dicts: ["sys_normal_disable"],
  //注册组件
  components: { SystemDialog },
  props: {
    dictType: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      status: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: "1",
          label: "停用",
        },
      ],
      //查询条件
      searchModel: {
        dictType: "",
        dictLabel: "",
        status: "",
        pageNo: 1,
        pageSize: 10,
      },
      //添加和修改字典数据窗口属性
      dictDataDialog: {
        title: "",
        visible: false,
        height: 250,
        width: 600,
      },
      rules: {
        dictLabel: [
          { required: true, trigger: "blur", message: "数据标签不能为空" },
        ],
        dictValue: [
          { required: true, trigger: "blur", message: "数据键值不能为空" },
        ],
        dictSort: [
          { required: true, trigger: "blur", message: "显示排序不能为空" },
        ],
      },
      //对象
      dictData: {
        dictCode: "",
        dictSort: "",
        dictLabel: "",
        dictValue: "",
        dictType: "",
        cssClass: "",
        listClass: "",
        status: "",
        createBy: this.$store.getters.userName,
        createTime: "",
        updateBy: this.$store.getters.userName,
        updateTime: "",
        remark: "",
      },
      dictDataList: [], //数据列表
      dictTypeListAll: [], //类型列表
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
    };
  },
  //初始化时调用
  created() {
    //调用查询字典数据列表的方法
    this.search();
    this.searchModel.dictType = this.dictType;
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220;
    });
    this.getDictTypeListAll();
  },
  methods: {
    /**
     * 页面跳转
     */
    doView() {
      this.$emit("fn", "");
    },
    /** 查询字典类型详细 */
    getType() {
      this.searchModel.dictType = this.defaultDictType;
    },
    /**
     * 查询所有字典类型列表
     */
    async getDictTypeListAll() {
      //发送查询请求
      let res = await dictApi.getDictTypeListAllApi();
      if (res.success) {
        this.dictTypeListAll = res.data;
      }
    },
    /**
     * 分页查询字典数据列表
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await dictApi.getDictDataListApi(this.searchModel);
      //执行成功
      if (res.success) {
        //字典数据列表
        this.dictDataList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size) {
      this.pageSize = size; //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /**
     * 当页码发生变化时触发该事件
     */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    /**
     * 窗口事件
     */
    onClose() {
      this.dictDataDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onConfirm() {
      //表单验证
      this.$refs.dictDataForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断角色ID是否为空
          if (this.dictData.dictCode === "") {
            //新增
            //发送添加请求
            this.dictData.createBy = this.$store.getters.userName;
            res = await dictApi.addDictData(this.dictData);
          } else {
            //发送修改请求
            this.dictData.updateBy = this.$store.getters.userName;
            res = await dictApi.updateDictData(this.dictData);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
            //关闭窗口
            this.dictDataDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    /**
     * 重置查询条件
     */
    resetValue() {
      //清空查询条件
      this.$resetForm("searchForm", this.searchModel);
      this.searchModel.dictType = this.dictType;
      //重新查询
      this.search();
    },
    /**
     * 打开添加窗口
     */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("dictDataForm", this.dictData);
      this.dictData.dictType = this.searchModel.dictType;
      this.dictDataDialog.title = "新增字典数据"; //设置窗口标题
      this.dictDataDialog.visible = true; //显示窗口
    },
    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      //数据回显
      this.$objCopy(row, this.dictData); //将当前编辑的数据复制到role对象中
      //设置窗口标题
      this.dictDataDialog.title = "编辑字典数据";
      //显示编辑字典数据窗口
      this.dictDataDialog.visible = true;
    },
    /**
     * 删除字典数据
     */
    async handleDelete(row) {
      //确认是否删除
      let confirm = await this.$myconfirm("确定要删除该数据吗?");
      if (confirm) {
        //发送删除请求
        let res = await dictApi.deleteDictData({ id: row.dictCode });
        //判断是否成功
        if (res.success) {
          //成功提示
          this.$message.success(res.message);
          //刷新
          this.search(this.pageNo, this.pageSize);
        } else {
          //失败提示
          this.$message.error(res.message);
        }
      }
    },
  },
};
</script>

<style></style>
